<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta content="telephone=no" name="format-detection">
	<title>睡眠</title>

	<link rel="stylesheet" type="text/css" href="{{ URL::asset('weixin/v1/css/navbar.css') }}">

	<script type="text/javascript" src="{{ URL::asset('weixin/v1/js/navbar.js') }}"></script>
	<script type="text/javascript">
	
		/** 屏蔽微信分享功能 */
		document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
			WeixinJSBridge.call('hideOptionMenu');
		});
	
		var ctx = "";
		
		
		var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = "/weixin/v1/css/pedometer/mod-sleep/mainC.css?clr=" + new Date() * 1; ;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
		
        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = "/weixin/v1/css/pedometer/mod-sleep/sleep.css?clr=" + new Date() * 1; ;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
		
		var head = document.getElementsByTagName('head')[0]; 
		var script= document.createElement("script"); 
		script.type = "text/javascript"; 
		script.src="/weixin/v1/js/sleep-main.js?clr=" + new Date() * 1; 
		head.appendChild(script);
		
		var head = document.getElementsByTagName('head')[0]; 
		var script= document.createElement("script"); 
		script.type = "text/javascript"; 
		script.src="/weixin/v1/js/pedometer/mod-sleep/mainC.js?clr=" + new Date() * 1; 
		head.appendChild(script);
		
		var head = document.getElementsByTagName('head')[0]; 
		var script= document.createElement("script"); 
		script.type = "text/javascript"; 
		script.src="/weixin/v1/js/pedometer/mod-sleep/sleep.js?clr="  + new Date() * 1; 
		head.appendChild(script);
		
	</script>
	
<style type="text/css">
#message{
    min-height: 30px;
    background: #656565;
    padding: 10px;
    z-index: 100;
    position: absolute;
    display:none;
    top:0;
    left:0;
    width:100%;
}
#message-content{
    color: #fff;
    font-size: 12px;
    width:90%;
    float:left;
    height: 30px;
    line-height: 30px;
}
#message .close{
	float:left;
	text-align: center;
	margin-top:5px;
	width:8%;
}
.manyDeviceBtn{
	width: 48px;
	height: 41px;
	position: absolute;
	right: 12.5%;
	margin-right: -24px;
/* 	z-index: 8888; */
	z-index: 2400;
	border-radius: 48px;
}
.alertManyDeviceTitle{
	width: 100%;
	heigth: 45px;
	line-height: 45px;
	text-align: center;
	font-size: 16px;
	color: #f7872c;
	border-bottom: solid 1px #d8d8d8;
}
.alertManyDeviceList{
	height: 198px;
	width: 100%;
	overflow: scroll;
}
.alertManyDeviceItem{
	width: 100%;
	height: 65px;
	border-bottom: solid 1px #d8d8d8;
}
.amdItemLeft{
	width: 95px;
	height: 65px;
	float: left;
}
.amdItemCenter{
	width: 145px;
	height: 65px;
	line-height:20px;
	float: left;
	text-align: left;
}
.amdItemRight{
	width: 40px;
	height: 65px;
	float: left;
}
.textHidden{
	overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
    width: 9em;/*不允许出现半汉字截断*/
}
</style> 

</head>
<body id="mainBodyC" style="display:none;-webkit-user-select:none;" onorientationchange="banOrientation()">
	
	<input type="hidden" id="unionId" value="${unionId }">
	<input type="hidden" id="pedometeropenId" value="${pedometeropenId }">
	<input type="hidden" id="weightopenId" value="${weightopenId }">
	<input type="hidden" id="deviceBindingState" value="${deviceBindingState}" />
	<input type="hidden" id="deviceId" value="" />
	<input type="hidden" id="isFirstUse" value="" />
	
	<!-- 消息 -->
	<div id="message">
		<div id="message-content">未绑定任何手环设备</div>
		<div id="message-close" class="close" style="display: none;" onclick="javascrpit:closeMessage();">
			<img alt="" src="/weixin/v1/img/v3-img/x.png">
		</div>
	</div>

	<!-- 上方内容 -->
	<div id="mainTopC" class="mainTopC">
		<!-- 头部信息 -->
		<div id="mainTopHeaerC" class="mainTopHeaerC">

			<div id="mainLeftBtnC" class="mainLeftBtnC">
				<img id="mainTopLeftBtnC" class="mainTopLeftBtnC" src="/weixin/v1/img/sleep/lock.png">
			</div>

			<div id="mainCenterTextC" class="mainCenterTextC">
				<span id="onDayOrOnWeek">今天</span>
			</div>

			<div id="mainRightBtnC" class="mainRightBtnC">
				<span id="dayOrWeek">天</span>
			</div>

		</div>
		
		<!-- 圆环 + 左右-->
		<div id="mainTopCenterC" class="mainTopCenterC">
			
			<!-- 切换设备按钮 -->
			<div id="manyDeviceBtn" class="manyDeviceBtn" onclick="showManyDeviceWin()">
				<img src="/weixin/v1/img/sleep/many_device.png" style="width:41px;" alt="" />
			</div>
			
			<!-- 提示层 -->
			<div id="manyDeviceBtnTipsDOM" class="manyDeviceBtn" style="background: #0f3c7d;z-index: 8888;display:none;">
				<img src="/weixin/v1/img/device/many_device.png" style="width:41px;" alt="" />
			</div>
			
			
			<div id="mainPreviousC" class="mainPreviousC">
				<div id="mainPreImgDC" class="mainDivC mainDivCleft">
					<img id="mainPreImgC" class="mainPreNextImgC" src="/weixin/v1/img/sleep/l1.png">
				</div>
			</div>

			<div id="mainCenterRingC" class="mainCenterRingC">
				<div id="ringOuter" class="ring_outer">
					<img id="ring_zzz_icon"  class="ring_zzz_icon" src="/weixin/v1/img/sleep/zzz.png" alt="" />
					
					<span id="sleep_level_value" class="sleep_level_value"></span>	

					<div id="ringTitle" class="ring_title">
						睡眠时长
						<img id="resetTimeBtn" src="/weixin/v1/img/sleep/edit.png" style="width:16px;position:absolute;" />
					</div>

					

					<div id="ring_default" class="ring_time_text" style="display:none;">
						<span id="ring_time_h" class="ringt_time_number">8</span>	
						<span class="time_text">小时</span>
						<span id="ring_time_m" class="ringt_time_number">52</span>
						<span class="time_text">分钟</span>
					</div>
					
					<div id="ring_default_null" class="ring_time_text">
						<!-- 暂无数据 -->
						0小时
					</div>
					<img id="mainRingImgC" class="mainRingImgC" src="/weixin/v1/img/sleep/ring.png"/>
				</div>	


			</div>

			<div id="mainNextC" class="mainNextC">
				<div id="mainNextImgDC" class="mainDivC mainDivCright">
					<img id="mainNextImgC" class="mainPreNextImgC" src="/weixin/v1/img/sleep/l2.png">
				</div>
			</div>

		</div>

		<!-- loader图片 -->
		<div id="ajaxLoader" style="top:40%;display:none;position:absolute;left:50%;text-align:left;margin-left:-60px;">
			<img src="/weixin/v1/img/sleep/ajax-loader.gif" style="border-radius: 46px;width:25px;" />
			<div style="color:#82aed1;font-size:14px;margin-left: 32px;margin-top: -24px;line-height: 24px;">数据分析中...</div>
		</div>


		<!-- 描述文字 -->
		<div id="mainTopFooterC" class="mainTopFooterC">
			<!-- 文字描述 -->
			<div id="sleepText" class="sleep_text">
				
				<div id="sleep_quality_avg" class="sleep_quality" style="display:none;text-align: center;padding-left: 0;">
					<span class="sleep_text_title" style="float:none;">平均每日睡眠</span>  
					<span id="sleep_avg_h" class="sleep_quality_number_dm" style="float:none;">7</span>	
					<span class="time_quality_text_mar" style="float:none;">小时</span>
					<span id="sleep_avg_m" class="sleep_quality_number_dm" style="float:none;">18</span>
					<span class="time_quality_text_mar" style="float:none;">分钟</span>		
				</div>
				
				<div id="sleep_quality_avg_null" class="sleep_quality" style="display:none;text-align: center;padding-left: 0;">
					<span class="sleep_text_title" style="float:none;">平均每日睡眠</span> 
					<span id="sleep_avg_h" class="sleep_quality_number_dm" style="float:none;font-size:16px;margin:6px 0 0 0px;">无</span>
				</div>

			</div>

			<div id="deepMildBig" class="deepMildBig">

				<div class="sleep_deep">
					
					<div class="sleep_time_number">
						<span id="sleep_depth_h" class="sleep_number_dm">0</span>	
						<span class="time_text_mar">小时</span>
						<!-- <span id="sleep_depth_m" class="sleep_number_dm">24</span>
						<span class="time_text_mar" >分钟</span>		 -->
					</div>
					<div class="sleep_text_title">深度睡眠</div>
				</div>	
				
				<div class="sleep_mild" style="text-align: right;">	
					
					<span class="sleep_text_title" style="margin-top:35px;position: relative;float: right;">
						轻度睡眠
						<div class="sleep_time_number" style="position: absolute;top: -35px;color: #fff;width: 90px;">
							<span id="sleep_mild_h" class="sleep_number_dm">0</span>	
							<span class="time_text_mar">小时</span>
						</div>
					</span>
				</div>
			

			</div>



		</div>
		
	</div>

	

	<!-- 画布所用图片 -->
	<img id="canvasIcon" src="/weixin/v1/img/sleep/moon.png" style="position:absolute;z-index:-888;top:0;">

	<!-- 树状图 -->
	<div id="mainFooterC" class="treeBottomC">

		<canvas id="canvasC" style="width:100%"></canvas>

	</div>

	<!-- 设置常规睡眠时间弹出框 -->
	<div id="alertSleepWin" class="alertWindowC" style="display:none;">

		<div class="alertWinHeaderC">
			
			<div class="alertWindowBtnC alertWinLeftBtnC">
				<div id="alertWinCancelBtn" class="alertWinCancelC">取消</div>
			</div>
				
			
			<div class="alertWinTitleC">
				<span>常规睡眠时间</span>
			</div>
		
			<div class="alertWindowBtnC alertWinRightBtnC">
				<div id="alertWinOkBtn" class="alertWinOkC">确定</div>
			</div>	
			
		</div>
		
		<div class="setSleepTime" style="margin-top: 15px;">
			<div class="sleepTime">
				
				<span class="defaultTimeTitle">入睡时间（TS）</span>	
				
				<select data-role="none" id="downTimeSelect" class="sleep_select" style="top:25px;"></select>

				<div id="triangle-down" class="downTime_select" style="top:39px;"></div>

			</div>
			
			<div class="sleepTime" style="text-align:right;">
				
				<span class="defaultTimeTitle">起床时间（TW）</span>	

				<select data-role="none" id="upTimeSelect" class="sleep_select" style="top:25px;left:20px;" onchange="changeUpTimeIndex(this.value)"></select>

				<div id="triangle-down" class="upTime_select" style="top:39px;"></div>

			</div>
		</div>
			
	</div>

	<!-- 重新计算睡眠时间弹出框 -->
	<div id="alertResetWin" class="alertWindowC" style="display:none;height:240px;">

		<div class="alertWinHeaderC">
			<div class="alertWindowBtnC alertWinLeftBtnC">
				<div id="alertWinCancelBtn_reSet" class="alertWinCancelC">取消</div>
			</div>
			
			<div class="alertWinTitleC">
				<span>重设睡眠时间</span>
			</div>

			<div class="alertWindowBtnC alertWinRightBtnC">
				<div id="alertWinOkBtn_reSet" class="alertWinOkC">确定</div>
			</div>
		</div>
		
		<div class="alertWinDate">
			<span style="float:left;width:20%;font-size:13px;line-height: 40px;">日期：</span>

			<input id="resetDate" type="date" class="resetDate"/>	
			<!-- 给不支持HTML5浏览器用的Date选项框 -->
			<select  id="resetDateOther" class="resetDateOther_select" style="display:none;">
				
			</select>
			
			<div class="resetDate_select"></div>
		
		</div>

		<div class="setSleepTime">
			<div class="sleepTime">
				
				<span>入睡时间（TS）</span>	
				
				<select id="reSetDownTimeSelect" class="sleep_select" >
					
				</select>
				<div id="triangle-down" class="downTime_select"></div>
			</div>
			
			<div class="sleepTime" style="text-align:right;">
				
				<span>起床时间（TW）</span>	

				<select  id="reSetUpTimeSelect" class="sleep_select" style="left:20px;">
					
				</select>
				<div id="triangle-down" class="upTime_select"></div>
			</div>
		</div>
	
		<div class="alertWinTipsC">
			为保证数据的准确性，您还可以对某天的睡眠时间进行手动调整。
		</div>
			
	</div>
	
	<!-- 切换手环弹出框 -->
	<div id="alert_manyDevice_win" class="alertWindowC" style="display:none;height: 340px;width: 280px;margin-left: -140px;margin-top: -170px;top:45%;">
		<div style="width: 100%;height: 30px;"></div>
		<div class="alertManyDeviceTitle">
			<span>请选择您要查看的手环：</span>
		</div>
		
		<div id="alertManyDeviceList" class="alertManyDeviceList">
		
		</div>
		
		<div style="width: 100%;border-top: solid 1px #d8d8d8;">
			<div class="alertWindowBtnC alertWinLeftBtnC" style="width: 50%;margin-top: 5px;">
				<div id="alert_manyDevice_cancel" class="alertWinCancelC" ontouchstart="removeBg2('alert_manyDevice_win')">取消</div>
			</div>
			<div class="alertWindowBtnC alertWinRightBtnC" style="width: 50%;margin-top: 5px;">
				<div id="alert_manyDevice_ok" class="alertWinOkC" ontouchstart="changeManyDevice()">确定</div>
			</div>	
		</div>
		
	</div>

</body>

</html>